<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>活动详情</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
  <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">
  <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <style>
    body {
      background: #f6f6f6;
    }

    .topimg {
      width: 100%;
      text-align: center;
      position: relative;
    }

    .topimg img {
      width: 100%;
      min-width: 80%;
      vertical-align: middle;
    }

    .detail_title {
      font-size: 18px;
      padding: 10px 15px;
      background-color: #FFF;
      font-weight: bold;
    }

    .detail_time_attr_join .fa {
      margin-right: 6px;
      width: 15px;
      text-align: center;
      color: #a9a9a9;
    }

    .detail_time_attr_join .weui-cell__bd p {
      font-size: 14px;
    }

    .introduce img {
      width: 100%;
      text-align: center;
    }

    .introduce .weui-panel__bd {
      padding: 15px;
    }

    .list-ul {
      display: block;
      clear: both;
      height: 60px;
      overflow: hidden;
      padding: 0 2px;
    }

    .list-ul li {
      overflow: hidden;
      width: 51px;
      float: left;
      margin-left: 8px;
      text-align: center;
      list-style: none;
    }

    .list-ul li img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
    }

    .list-ul .text-overflow {
      font-size: 12px;
    }

    .text-overflow {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .btn-bm {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .btn-bm a {
      border-radius: 0;
    }

    /* 弹出层样式 */

    #cover {
      display: none;
      position: fixed;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      background-color: #333333;
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      opacity: 0.8;
      z-index: 1000;
    }

    .lay {
      left: 0;
      bottom: 0;
      position: fixed;
      z-index: 3000;
      width: 100%;
      overflow: visible !important;
      background-color: #FFF;
    }

    .joinTop {
      position: relative;
      height: 44px;
    }

    .joinTop p {
      text-align: center;
      height: 44px;
      line-height: 44px;
    }

    .joinTop i {
      position: absolute;
      right: 15px;
      top: 15px;
    }

    .next-wrap {
      margin-top: 15px;
      border-top: 1px solid #e5e5e5;
      align-items: center;
    }

    .color-red-bold {
      color: #dc3939;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <!-- 顶部图片 -->
  <div class="topimg">
    <img src="img.jpg" alt="">
  </div>
  <!-- 顶部标题 -->
  <div class="detail_title">
    亚马逊A战队孵化营发布会 暨 一周年庆典
  </div>
  <!-- 信息列表 -->
  <div class="weui-cells detail_time_attr_join" style="margin-top: 0">
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <i class="fa fa-clock-o"></i>
      </div>
      <div class="weui-cell__bd">
        <p>06-22 13:00 至 06-22 18:00</p>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <i class="fa fa-map-marker"></i>
      </div>
      <div class="weui-cell__bd">
        <p>广东广州白云区广州市云城东路515-517号万达希尔顿酒店二楼宴会3厅</p>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <i class="fa fa-user-o"></i>
      </div>
      <div class="weui-cell__bd">
        <p>已报名
          <span>108</span> 人</p>
      </div>
    </div>
    <div class="weui-cell">
      <div class="weui-cell__hd">
        <i class="fa fa-cny"></i>
      </div>
      <div class="weui-cell__bd">
        <p class="color-red-bold">88</p>
      </div>
    </div>
  </div>

  <!-- 详情介绍 -->
  <div class="weui-panel weui-panel_access introduce">
    <div class="weui-panel__hd">详情介绍</div>
    <div class="weui-panel__bd">
      <p>可以插入文字或图片</p>
      <img src="info.png" alt="">
    </div>
  </div>

  <!-- 最近报名 -->
  <div class="weui-panel weui-panel_access introduce">
    <div class="weui-panel__hd">最近报名</div>
    <div class="weui-panel__bd">
      <ul class="list-ul">
        <li>
          <p>
            <img src="ava.jpg" alt="">
          </p>
          <p class="text-overflow">昵称123456</p>
        </li>
        <li>
          <p>
            <img src="ava.jpg" alt="">
          </p>
          <p class="text-overflow">昵称</p>
        </li>
        <li>
          <p>
            <img src="ava.jpg" alt="">
          </p>
          <p class="text-overflow">昵称</p>
        </li>
        <li>
          <p>
            <img src="ava.jpg" alt="">
          </p>
          <p class="text-overflow">昵称</p>
        </li>
        <li>
          <p>
            <img src="ava.jpg" alt="">
          </p>
          <p class="text-overflow">昵称</p>
        </li>
        <li>
          <p>
            <img src="ava.jpg" alt="">
          </p>
          <p class="text-overflow">昵称</p>
        </li>
      </ul>
    </div>
  </div>
  <!-- 占位垂直60px -->
  <div style="height: 60px;"></div>

  <footer class="btn-bm">
    <a id="btn-bm" class="weui-btn weui-btn_primary">我要报名</a>
  </footer>

  <div id="cover"></div>
  <div class="lay" style="display: none">
    <div class="joinTop">
      <p>请选择</p>
      <i id="close" class="fa fa-remove"></i>
    </div>
    <!-- 选择票种 -->
    <div class="weui-cells__title">选择票种</div>
    <div class="weui-cells weui-cells_radio">
      <label class="weui-cell weui-check__label" for="x11">
        <div class="weui-cell__bd">
          <p>参会费：
            <span class="price color-red-bold">88</span> 元</p>
        </div>
        <div class="weui-cell__ft">
          <input type="radio" class="weui-check" name="radio1" id="x11" checked="checked">
          <span class="weui-icon-checked"></span>
        </div>
      </label>
    </div>
    <!-- 合计 下一步 -->
    <div class="weui-flex next-wrap">
      <div class="weui-flex__item" style="padding-left: 15px">合计：
        <span id="total" class="color-red-bold">88</span> 元</div>
      <div class="weui-flex__item">
        <a href="form.html" class="weui-btn weui-btn_primary" style="border-radius: 0">下一步</a>
      </div>
    </div>

  </div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script>
  $('#btn-bm').click(function () {
    $('#cover').fadeIn();
    $('.lay').fadeIn();
  });
  $('#close').click(function () {
    $('#cover').fadeOut();
    $('.lay').fadeOut();
  })

</script>

</html>